<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>3.事件传参</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			事件传参总结：
					1.不传参数，那就写：@click="show" ，show会收到一个event（事件对象）
					2.传一个参数，那就写：@click="show(6)" ，show只会收到一个6
					3.传多个参数，那就写：@click="show(6,7,8)" ，show会收到：6、7、8
					4.传参同时还想用事件对象，那就写：@click="show($event,6)"，show会收到：事件对象、6
					5.注意：传参时，当然也可以传递data中的数据，例如@click="show(qwe,asd)"
		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<h2>{{school}}欢迎你!</h2>
			<button @click="show1(666)">点我提示1</button>
			<button @click="show2(666,777)">点我提示2</button>
			<button @click="show3($event,888)">点我提示3</button>
			<button @click="show4(qwe,asd)">点我提示4</button>

			<!-- 几乎不会有人写下面这2行 -->
			<!-- <button @click="show4($event)">点我提示4</button> -->
			<!-- <button @click="show4()">点我提示4</button> -->
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			
			new Vue({
				el:'#demo',
				data:{
					qwe:900,
					asd:800,
					school:'尚硅谷'
				},
				methods:{
					show1(number){
						alert(`信息1,${number}`)
					},
					show2(n1,n2){
						alert(`信息2,${n1},${n2}`)
					},
					show3(e,number){
						alert(`信息3,${number},${e.target.innerText}`)
					},
					show4(a,b){
						console.log(a,b)
					}
				}
			})
		</script>
	</body>
</html>